<template>
    <div class="preview">
        <img v-if="getImageId" :src="imgUrl + getImageId" alt="数据已过期">
        <img v-else :src="noImg" alt="">
    </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { useRoute } from 'vue-router'
import noImg from '@/assets/img/404.png'
// 路由实例（获取URL参数）
const route = useRoute();

const imgUrl = 'http://www.eff.org.cn:2000/sys_file/show/'

const getImageId = computed(() => {
    // 从路由query中获取id（对应二维码中的?id=xxx）
    return route.query.id || '';
});

</script>
<style lang="scss" scoped>
.preview {
    img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        padding: 0;
        margin: 0;
    }
}
</style>